<template>
  <!-- 标签筛选组件 -->
  <div class="tag-filter">
    <!-- 遍历所有标签，点击可筛选 -->
    <span v-for="tag in tags" :key="tag" :class="['tag', { active: tag === selectedTag }]" @click="selectTag(tag)">{{ tag }}</span>
    <!-- 已选标签时显示清除按钮 -->
    <span v-if="selectedTag" class="clear" @click="clearTag">清除筛选</span>
  </div>
</template>

<script setup>
// 引入 Vue 的 Composition API
import { ref, defineEmits } from 'vue'
// 接收父组件传入的标签列表和当前选中标签
const props = defineProps({
  tags: Array,
  selectedTag: String
})
// 定义事件，用于通知父组件标签变化
const emit = defineEmits(['update:selectedTag'])
// 选择标签
function selectTag(tag) {
  emit('update:selectedTag', tag)
}
// 清除标签筛选
function clearTag() {
  emit('update:selectedTag', '')
}
</script>

<style scoped>
/* 标签筛选样式 */
.tag-filter {
  margin-bottom: 24px;
}
.tag {
  display: inline-block;
  background: #e3f0ff;
  color: #409eff;
  border-radius: 4px;
  padding: 2px 10px;
  margin-right: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.tag.active {
  background: #409eff;
  color: #fff;
}
.clear {
  margin-left: 16px;
  color: #f56c6c;
  cursor: pointer;
  font-size: 13px;
}
</style> 